<template>
  <div class="inpatient-cure-page">
    <section class="layer">
      <div class="box">
        <div class="box-header">
          <span class="box-title">查询条件</span>
        </div>
        <div class="box-body">
          <el-form ref="searchForm" :model="searchForm">
            <el-row :gutter="12">
              <el-col :md="24" :lg="12" :xl="8">
                <el-form-item label="人员类型" label-width="100px" prop="personnelType">
                  <el-select v-model="searchForm.personnelType" multiple placeholder="请选择" style="width:100%;">
                    <el-option
                      v-for="item in personnelOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="24" :lg="12" :xl="8">
                <el-form-item label="人群类型" label-width="100px" prop="crowdType">
                  <el-select v-model="searchForm.crowdType" multiple placeholder="请选择" style="width:100%;">
                    <el-option
                      v-for="item in crowdOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="24" :lg="12" :xl="8">
                <el-form-item label="待遇类型" label-width="100px" prop="treatMentType">
                  <el-select v-model="searchForm.treatmentType" multiple placeholder="请选择" style="width:100%;">
                    <el-option
                      v-for="item in treatmentOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="24" :lg="24" :xl="24">
                <el-form-item label="指标" label-width="100px" prop="target">
                  <el-select v-model="searchForm.target" multiple placeholder="请选择" style="width:100%;">
                    <el-option
                      v-for="item in targetOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="24" :lg="16" :xl="16">
                <el-form-item label="费用时间" label-width="120px" prop="priceTime">
                  <price-time ref="priceTime" :show-default-date="true" :show-btn-select="true" @change="priceTimeChange" />
                </el-form-item>
              </el-col>
              <el-col :md="8" :lg="8" :xl="8" align="right">
                <el-form-item>
                  <el-button @click="resetCondition">重置</el-button>
                  <el-button type="primary" @click="search">查询</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </section>
    <section class="layer">
      <div class="box">
        <div class="box-header">
          <span class="box-title">指标详情</span>
        </div>
        <div class="box-body">
          <DynamicTable :table-data="tableData" />
        </div>
      </div>
    </section>
    <section class="layer">
      <div v-if="costComposition.length > 0" class="box">
        <div class="box-header">
          <span class="box-title">医疗费用各部分构成</span>
        </div>
        <div class="box-body">
          <RingChart chart-id="costComposition" :data-ring="dataBar" height="400px" val-title="费用" />
        </div>
      </div>
    </section>
    <section class="layer">
      <el-row :gutter="12">
        <el-col v-if="topChartMedical.length > 0" :md="16" :lg="12" :xl="12">
          <div class="box">
            <div class="box-header">
              <span class="box-title">使用频率TOP10药品</span>
            </div>
            <div class="box-body">
              <LineChart chart-id="medicalTop10" :data-bar="topChartMedical" height="400px" title-x="使用频率" title-y="药品" />
            </div>
          </div>
        </el-col>
        <el-col v-if="topChartMedicalPrice.length > 0" :md="16" :lg="12" :xl="12">
          <div class="box">
            <div class="box-header">
              <span class="box-title">药品金额TOP10</span>
            </div>
            <div class="box-body">
              <LineChart chart-id="medicalPriceTop10" :data-bar="topChartMedicalPrice" height="400px" title-x="金额" title-y="药品" />
            </div>
          </div>
        </el-col>
      </el-row>
    </section>
    <section class="layer">
      <el-row :gutter="12">
        <el-col v-if="topChartProject.length > 0" :md="16" :lg="12" :xl="12">
          <div class="box">
            <div class="box-header">
              <span class="box-title">使用频率TOP10诊疗项目</span>
            </div>
            <div class="box-body">
              <LineChart chart-id="projectTop10" :data-bar="topChartProject" height="400px" title-x="使用频率" title-y="诊疗项目" />
            </div>
          </div>
        </el-col>
        <el-col v-if="topChartProjectPrice.length > 0" :md="16" :lg="12" :xl="12">
          <div class="box">
            <div class="box-header">
              <span class="box-title">诊疗项目金额TOP10</span>
            </div>
            <div class="box-body">
              <LineChart chart-id="projectPriceTop10" :data-bar="topChartProjectPrice" height="400px" title-x="金额" title-y="诊疗项目" />
            </div>
          </div>
        </el-col>
      </el-row>
    </section>
  </div>
</template>
<script>
import PriceTime from '../components/PriceTime'
import LineChart from '@/components/Echarts/LineChart'
import RingChart from '@/components/Echarts/RingChart'
import DynamicTable from '@/components/DynamicTable/index'
import { mapGetters } from 'vuex'
import { getMedicalCost, getTopchartData } from '@/api/assist-decision/fertilityTreatmentAnalyze'
export default {
  mixin: [],
  components: {
    PriceTime,
    LineChart,
    RingChart,
    DynamicTable
  },
  props: {},
  data() {
    return {
      searchForm: {
        personnelType: [],
        crowdType: [],
        treatmentType: [],
        target: [],
        beginDate: '',
        endDate: ''
      },
      targetOptions: [
        {
          value: '1',
          label: '就医人数'
        }, {
          value: '2',
          label: '就医人次'
        }, {
          value: '3',
          label: '人次人头比'
        }, {
          value: '4',
          label: '总费用'
        }, {
          value: '5',
          label: '记账医疗费'
        }, {
          value: '6',
          label: '就诊率'
        }, {
          value: '7',
          label: '就诊频次'
        }, {
          value: '8',
          label: '疾病发生率'
        }, {
          value: '9',
          label: '人均年度费用'
        }, {
          value: '10',
          label: '次均总费用'
        }, {
          value: '11',
          label: '次均记账费用'
        }, {
          value: '12',
          label: '基金支付比例'
        }
      ],
      costComposition: [],
      topChartMedical: [],
      topChartMedicalPrice: [],
      topChartProject: [],
      topChartProjectPrice: [],
      tableData: [
        {
          secType: '省直参保人员',
          tirType: '在职',
          num: 300,
          count: 20,
          totle: 100
        },
        {
          secType: '省直参保人员',
          tirType: '退休',
          num: 300,
          count: 20,
          totle: 100
        },
        {
          secType: '委托管理人员',
          tirType: '在职',
          num: 300,
          count: 20,
          totle: 100
        },
        {
          secType: '委托管理人员',
          tirType: '退休',
          num: 300,
          count: 20,
          totle: 100
        }
      ],
      tableHeader: [
        {
          label: '二级人员类型',
          value: 'secType'
        },
        {
          label: '三级人员类型',
          value: 'tirType'
        },
        {
          label: '就医人数',
          value: 'num'
        },
        {
          label: '就医次数',
          value: 'count'
        },
        {
          label: '总计',
          value: 'totle'
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['selectMaps']),
    personnelOptions() {
      const result = this.selectMaps && this.selectMaps.EMP_TYPE || []
      const options = []
      result.forEach(item => {
        options.push({ label: item.dictValue, value: item.dictCode })
      })
      return options
    },
    crowdOptions() {
      const result = this.selectMaps && this.selectMaps.LV3_PSN_TYPE || []
      const options = []
      result.forEach(item => {
        options.push({ label: item.dictValue, value: item.dictCode })
      })
      return options
    },
    treatmentOptions() {
      const result = this.selectMaps && this.selectMaps.TRT_TYPE || []
      const options = []
      result.forEach(item => {
        options.push({ label: item.dictValue, value: item.dictCode })
      })
      return options
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    getMedicalCost(params) {
      getMedicalCost(params).then(res => {
        const result = res.data
        if (result) {
          // 查字典，找出id对应的名称
          const medicalType = this.selectMaps && this.selectMaps.MED_ITEM_TYPE || []
          const newMedicalType = []
          medicalType.forEach(item => {
            newMedicalType.push({ code: item.dictCode, name: item.dictValue })
          })

          const arr = []
          result.forEach(item => {
            newMedicalType.forEach(val => {
              if (val.code === item.med_item_type) {
                arr.push({ name: val.name, value: item.sumfee })
              }
            })
          })
          this.costComposition = arr
        }
      })
    },
    getTopchartData(params) {
      getTopchartData(params).then(res => {
        const result = res.data
        if (result) {
          this.topChartMedical = result.chart1 && this.handleChartData(result.chart1)
          this.topChartMedicalPrice = result.chart2 && this.handleChartData(result.chart2)
          this.topChartProject = result.chart3 && this.handleChartData(result.chart3)
          this.topChartProjectPrice = result.chart4 && this.handleChartData(result.chart4)
        }
      })
    },
    handleChartData(chartData) {
      if (!chartData || chartData.length === 0) {
        return []
      }
      const result = []
      chartData.forEach(item => {
        result.push({ name: item.med_item_name, value: item.value })
      })
      return result.reverse()
    },
    resetCondition() {
      this.$refs.priceTime.reset() // 子组件重置
      this.$refs.searchForm.resetFields()
    },
    search() {
      const index = this.searchForm.target.length > 0 ? this.searchForm.target.join(',') : '1,2,3,4,5,6,7,8,9,10,11,12'
      const lv3PsnType = this.searchForm.crowdType.join(',')
      const psnType = this.searchForm.personnelType.join(',')
      const trtType = this.searchForm.treatmentType.join(',')
      const params = {
        beginDate: this.searchForm.beginDate, // 开始日期
        endDate: this.searchForm.endDate, // 结束日期
        index,
        lv3PsnType,
        psnType,
        trtType
      }
      this.getMedicalCost(params)
      this.getTopchartData(params)
    },
    handleCrowd(val) {
      console.log(val)
    },
    handleTreatment(val) {
      console.log(val)
    },
    priceTimeChange(val) {
      this.searchForm.beginDate = val[0] || null
      this.searchForm.endDate = val[1] || null
    }
  }
}
</script>
